<template>
	<view>
		<block v-for="(item,index) in activityList" :key='index' >
			<view @click="toActivityDetail(item,index)" class="project-swipe-contain-item" :class="opcity==index?'sysOpacity':''">
				<view class="swipe-contain-item-top">
					<view class="swipe-contain-item-left">
						<image class="swipe-contain-item-pic" :src="item.imgAddrs" mode=""></image>
						<image class="swipe-contain-item-tip" v-if="item.status==1" src="https://www.innovationgloble.com/wxs/img/wx/active_bmz_1.png" ></image>
						<image class="swipe-contain-item-tip" v-if="item.status==4" src="https://www.innovationgloble.com/wxs/img/wx/active_wks.png" ></image>
						<image class="swipe-contain-item-tip" v-if="item.status==5" src="https://www.innovationgloble.com/wxs/img/wx/active_ing.png" ></image>
						<image class="swipe-contain-item-tip" v-if="item.status==6" src="https://www.innovationgloble.com/wxs/img/wx/active_end.png" ></image>
					</view>
					<view class="swipe-contain-item-contain">
						<view style="margin-top: 0upx;" class="swipe-contain-item-contain-title oneline"><image src="../../static/tj.png" mode="" v-if="item.topState==1"></image>{{item.activitiesTopic}}</view>
						<view class="swipe-contain-item-contain-text">{{item.startTime+"~"+item.endTime}}</view>
						<view style="margin-left: -8upx;" class="swipe-contain-item-contain-text oneline">
							<text style="color: #BBBBBB;font-size: 24upx;" class="icon iconfont iconweizhi"></text>
							{{item.provinceName+' '+item.cityName}}
						</view>
						<view class="swipe-contain-item-activity-info">
							<view v-if="item.mallNum&&item.isReg===1" class="">
								<text class="swipe-contain-item-activity-info-num">{{item.mallNum}}</text>
								<text class="swipe-contain-item-activity-info-text">人报名</text>
							</view>
							<view v-else class="">
								<text class="swipe-contain-item-activity-info-num">{{item.browseNum}}</text>
								<text class="swipe-contain-item-activity-info-text">人浏览</text>
							</view>
							<view class="swipe-contain-item-activity-info-money" v-if=" parseFloat(item.isReg)===1 ">
								{{formatPrice(item)}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="index<activityList.length-1" class="project-seprate"></view>
		</block>
	</view>
</template>

<script>
	export default {
		props: ['activityList'],
		data() {
			return {
				constUrl: this.$baseUrl,
				opcity: -1
				// projectList:[],
			}
		},
		methods: {
			toActivityDetail(item,index) {
				this.opcity = index
				uni.navigateTo({
					url: '/pages/activity-detail/activity-detail?scene=' + item.id
				});
			},
			formatPrice(item){
				if(item.isFee===0){
					return "免费"
				}else{
					let fee = item.regFee.toFixed(2)
					return '¥'+fee
				}
			},
			resetOpcity(){
				let that = this
				setTimeout(function(){
					that.opcity = -1
				},1000)
			}
		},
	}
</script>

<style scoped>
	.project-seprate {
		width: 100%;
		height: 12upx;
		background: rgba(245, 245, 245, 1);
	}

	.swipe-contain-item-activity-info-money {
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(222, 90, 2, 1);
	}

	.swipe-contain-item-activity-info-num {
		color: #2A7DFA;
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.swipe-contain-item-activity-info-text {
		color: #7B7B7B;
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.oneline {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.swipe-contain-item-contain-title image{
		width: 83upx;
		height: 30upx;
		margin-right: 10upx;
		vertical-align: -10%;
	}

	.swipe-contain-item-activity-info {
		display: flex;
		justify-content: space-between;
		line-height: 30upx;
	}

	.swipe-contain-item-contain-text {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(83, 83, 83, 1);
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.selfcolor {
		color: #DE5A02
	}

	.swipe-contain-item-contain {
		padding-bottom: 4upx;
		width: 382upx;
		/* flex:1 */
	}

	.swipe-contain-item-pic {
		width: 270upx;
		height: 170upx;
		margin-right: 30upx;
		flex-shrink: 0;
		border-radius: 6upx;
	}

	.swipe-contain-item-top {
		display: flex;
		align-items: center;
	}
	.swipe-contain-item-left{
		position: relative;
		display: flex;
		align-items: center;
	}
	.swipe-contain-item-tip{
		position: absolute;
		right:25upx;
		top: 0;
		width: 100upx;
		height: 50upx;
	}

	.project-swipe-contain-item {
		margin: 0upx 30upx;
		padding: 20upx 0upx ;
	}
</style>